<template>
    <div class="xiaoqu">
        <div class="xiaoqu-content">
            <div class="searchBox">
                <div class="searchLi">
                    <span class="xiaoquName">咨询信息：</span>
                    <input type="text" autocomplete="off" v-model="searchContent.info">
                </div>
                <div class="searchLi">
                    <span>创建时间：</span>
                    <el-date-picker v-model="searchContent.time" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="searchBtn">
                    <el-button type="primary" @click="searchClick">搜索</el-button>
                </div>
            </div>
            <div class="addXiaoquBtn">
                <el-button style="display:none;" type="text" @click="addXiaoqu" class="addBtn">新增小区</el-button>
                <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="form.userName" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="咨询师名称" :label-width="formLabelWidth">
                            <el-select v-model="form.teacherId" placeholder="请选择老师" @change="getTeacherId">
                                <el-option v-for="item in teacherList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="咨询内容" :label-width="formLabelWidth">
                            <el-input class="custom-textarea-height" type="textarea" v-model="form.content"
                                autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="咨询类型" :label-width="formLabelWidth">
                            <el-input v-model="form.type" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="咨询师等级" :label-width="formLabelWidth">
                            <el-input v-model="form.levelName" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="咨询状态" :label-width="formLabelWidth">
                            <el-select v-model="form.status" placeholder="请选择状态">
                                <el-option v-for="item in statusList" :key="item"
                                    :label="item == 0 ? '未完成' : item == 1 ? '未评价' : '已评价'" :value="item"></el-option>

                            </el-select>
                        </el-form-item>


                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button @click="save">保 存</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="xiaoqu-table">
                <el-table :data="tableData" border :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="{ background: '#1890ff', color: '#ffffff', 'text-align': 'center' }">
                    <el-table-column prop="id" label="Id">
                    </el-table-column>
                    <el-table-column prop="userName" label="用户名">
                    </el-table-column>
                    <el-table-column prop="teacherName" label="咨询师名称">
                    </el-table-column>
                    <el-table-column label="咨询内容">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" placement="top-start">
                                <div slot="content">{{ scope.row.content }}</div>
                                <div class="info-ellipsis">{{ scope.row.content }}</div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="咨询类型">
                    </el-table-column>
                    <el-table-column prop="levelName" label="咨询师等级">
                    </el-table-column>
                    <el-table-column prop="status" label="咨询状态">
                        <template slot-scope="scope">
                            <span style="color: #1890ff; font-size: 12px;">
                                {{ scope.row.status == 0 ? "未完成" : scope.row.status == 1 ? "未评价" : "已评价" }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="创建时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" type="text" size="small">预约详情</el-button>
                            <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页按钮-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import axios from "axios";

export default {
    name: "XiaoQuComponent",
    data() {
        return {
            value1: '',
            input: '',
            dialogFormVisible: false,
            dialogTitle: '',//对话框标题
            //获取老师列表
            teacherList: [],
            //获取状态列表
            statusList: [],
            form: {
                id: '',
                userName: '',
                teacherName: '',
                content: '',
                type: '',
                levelName: '',
                status: '',
                //老师id
                teacherId: ''
            },
            tableData: [],
            tableData2: [],
            addressAll: [],   //省市区
            address: [], //你选择的地址
            formLabelWidth: '120px',
            //查看关联门店里的搜索数据
            association: false,
            checkBtn2: {
                villageName2: "",
                pageNum: 1,
                pageSize: 10,
            },
            addAssociation: false,
            checkBtn3: {
                villageName3: "",
            },
            //搜索框数据对象
            searchContent: {
                info: "",
                time: [],
            },
            xiaoquID: "",
            tableData3: [],
            row: {},      // 全局row 把scope.row赋给它
            allId: -1,   //全局id用来在新增和修改是做判断

            //分页
            currentPage: 1, // 当前页数
            pageSize: 5, // 每页条数
            total: 0,// 数据总数
        }
    },
    //   页面初始化后执行
    created() {
        //获取老师信息
        this.getTeacher()
        //获取状态列表
        this.getStatusList()
        //获取列表
        this.flushPage()

    },
    methods: {

        save() {
            if (this.allId === -1) {   //allId为空 新增

            } else {      //allId不为空 修改

                this.dialogFormVisible = false;
                // 未完待续..............................
                console.log(this.form.id);
                console.log(this.form.teacherId)
                console.log(this.form.content)
                console.log(this.form.type)
                console.log("这是levelId:" + this.form.levelId)
                console.log(this.form.status)
                console.log(this.getCurrentDateTime())

                this.axios.put("/consultWait/update", {

                    id: this.form.id,
                    type: this.form.type,
                    createtime: this.getCurrentDateTime(),
                    content: this.form.content,
                    teacherId: this.form.teacherId,
                    status: this.form.status,
                    levelId: this.form.levelId


                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("更新成功");
                    } else {
                        this.$message.error("更新失败");
                    }
                    console.log(res.data.data);
                    this.searchClick()
                })






            }
        },
        //新增小区
        addXiaoqu() {
            this.dialogTitle = "新增小区";
            this.dialogFormVisible = true;
            this.allId = -1;
        },
        //保存后清空表单
        clearForm() {

        },
        //格式化时间
        formatDateTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        //取消
        cancel() {
            this.dialogFormVisible = false;
        },
        //预约详情
        editClick(row) {
            console.log(row);

            this.dialogTitle = "预约详情";
            this.dialogFormVisible = true;
            this.row = row;
            this.allId = this.row.id;

            this.form = { ...row }

        },
        //获取老师列表
        getTeacher() {
            this.axios.get("/teacher/findAllTeacher").then(res => {
                console.log(res.data.data);
                this.teacherList = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },
        //获取状态列表
        getStatusList() {
            this.axios.get("/consultWait/selectStatus").then(res => {
                console.log(res.data.data);
                this.statusList = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },

        //切换老师的下拉框选项时触发
        getTeacherId(tid) {
            console.log(tid);
            this.axios.get("/teacher/selectLevel", {
                params: {
                    id: tid
                }
            }).then(res => {
                console.log(res.data.data);
                this.form.levelName = res.data.data.levelName

            })

        },

        //刷新页面
        flushPage() {
            this.axios.get("/consultWait/selectAll", {
                params: {
                    page: this.currentPage,
                    size: this.pageSize
                }
            }).then((res) => {
                // console.log(res.data.data);
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            }).catch(err => { console.log(err); })
        },
        //删除预约信息
        deleteClick(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete("/consultWait/delete", {
                    params: {
                        id: id,
                    }

                }).then((res) => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        this.$message.success("删除成功")
                    }
                    this.flushPage();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //分页条件搜索
        searchClick() {
            if (!this.searchContent.time) {
                this.searchContent.time = []
            }
            this.axios.get('/consultWait/selectByCondition',
                {
                    params: {
                        info: this.searchContent.info,
                        page: this.currentPage,
                        size: this.pageSize,
                        startDate: this.searchContent.time[0] === undefined ? '' : this.formatDateTime(this.searchContent.time[0]),
                        endDate: this.searchContent.time[1] === undefined ? '' : this.formatDateTime(this.searchContent.time[1]),

                    }
                }
            ).then((res) => {
                //处理响应数据
                console.log(res);
                //真正需要的数据
                console.log(res.data.data.list);
                //将得到的数据加载到tableData
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            }).catch(err => { })
        },
        //分页函数
        //点击按钮切换页面
        // 切换每页显示条数
        handleSizeChange(size) {
            console.log(size);

            this.pageSize = size;
            // 可以在这里重新获取数据
            this.searchClick()
        },
        // 切换当前页
        handleCurrentChange(page) {
            console.log(page)
            this.currentPage = page;
            this.searchClick()

        },

        getCurrentDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = this.padNumber(now.getMonth() + 1);
            const day = this.padNumber(now.getDate());
            const hours = this.padNumber(now.getHours());
            const minutes = this.padNumber(now.getMinutes());
            const seconds = this.padNumber(now.getSeconds());
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        }

    }
}
</script>



<style scoped>
.xiaoqu {
    height: 800px;
    /* background-color: hotpink; */
}

.xiaoqu-content {
    padding: 20px;
}

.searchBox {
    display: flex;
    justify-content: flex-start;
}

.searchLi {
    margin-right: 20px;
}

.addXiaoquBtn {
    margin-top: 20px;
}

input {
    height: 34px;
    outline: none;
    border: 1px solid #aaa;
    padding: 0 15px;
    border-radius: 5px;
}

input:hover {
    border: 1px solid #555555;
}

input:focus {
    border: 1px solid #409eff;
}

.addBtn {
    padding: 10px 20px;
    background-color: #409eff;
    color: whitesmoke;
    border: 1px solid #409eff;
}

.xiaoqu-table {
    margin-top: 20px;
    table-layout: auto;
}

/* 单行省略 */
.info-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 150px;
}

.dialog-footer{
    margin-top:10px;
}
</style>
